<template>
  <!-- 报销单简要信息卡片 -->
  <div>
    <a-checkbox-group @change="onChange" v-model="checked" style="width:100%">
      <div v-for="item in list" :key="item.id" class="detail-card">
        <a-checkbox
          class="checkbox"
          :value="item"
          v-show="mode === 'edit' && bxdh === undefined"
        ></a-checkbox>
        <div class="info" @click="cardClick(item)">
          <a-row class="row-title">
            <a-col :span="10" class="bxdh" v-if="item.bxdh">{{ item.bxdh }}</a-col>
            <a-col :span="10" class="bxdh" v-else>DR************</a-col>
            <a-col :span="4" class="button" style="float: right;text-align: right;">
              <a-tag :color="color">{{ item.bczt }}</a-tag>
            </a-col>
            <a-col
              :span="10"
              class="tjsj"
              style="margin-left: 0px;padding-right: 10px;text-align: right"
            >{{ item.crtTime.substring(0,10) }}</a-col>
            <a-col
              :span="14"
              clss="bz"
              v-if="expensetype === 'meal'"
            >{{ (item.zdsy === undefined ? '':item.zdsy).length <= 13 ? item.zdsy : item.zdsy.substring(0,13)+'...' }}</a-col>
            <a-col
              :span="24"
              clss="bz"
              v-else
            >{{ (item.sy === undefined ? '':item.sy).length <= 13 ? item.sy : item.sy.substring(0,13)+'...' }}</a-col>

          </a-row>
          <!--<div class="bz" style="word-break:break-all;float: left;width: 100%;"><span>{{(item.bz === undefined ? '':item.bz).length <= 20 ? item.bz : item.bz.substring(0,20)+'...' }}</span></div>-->
          <a-divider style="margin:0px 0px" />
          <table style="width:100%; height:80px" v-if="expensetype === 'evection'">
            <tr>
              <td style="width:50%">
                <img src="@/assets/expense/point.png" />
                出发城市:
                <span class="item-major">{{ item.gcfd }}</span>
              </td>
              <td>
                <img src="@/assets/expense/point.png">
                目的城市:
                <span class="item-major">
                  {{ item.gmdd }}
                </span>              </td>
            </tr>
            <tr>
              <td>
                <img src="@/assets/expense/point.png">
                交通费用:
                <span class="item-major">
                  {{ (item.gjtf === undefined ? '0':item.gjtf+'').replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}
                </span>              </td>
              <td>
                <img src="@/assets/expense/point.png">
                住宿费用:
                <span class="item-major">
                  {{ (item.zsje === undefined ? '0':item.zsje+'').replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}
                </span>              </td>
            </tr>
          </table>
          <table style="width:100%; height:80px" v-if="expensetype === 'traffic'" >
            <tr>
              <td style="width:50%">
                <img src="@/assets/expense/point.png" />
                出发地点:
                <!-- <div class="traffic-info" v-if="flag" style="width:85px">{{ item.cfd }}</div>
                <div class="traffic-info" v-else style="width:115px">{{ item.cfd }}</div> -->
                <span class="item-major">
                  {{ item.cfd.length <= 5 ? item.cfd : item.cfd.substring(0,5)+'...' }}
                </span>
              </td>
              <td>
                <img src="@/assets/expense/point.png" />
                目的地点:
                <!-- <div class="traffic-info" v-if="flag" style="width:85px">{{ item.mdd }}</div>
                <div class="traffic-info" v-else style="width:115px">{{ item.mdd }}</div> -->
                <span class="item-major">
                  {{ item.mdd.length <= 5 ? item.mdd : item.mdd.substring(0,5)+'...' }}
                </span>
              </td>
            </tr>
            <tr>
              <td>
                <img src="@/assets/expense/point.png">
                费用时间:
                <!-- <div class="traffic-info" v-if="flag" style="width:85px">
                  {{ (item.fyrq === undefined ? '':item.fyrq).substring(0,10) }}
                </div>
                <div class="traffic-info" v-else style="width:115px">
                  {{ (item.fyrq === undefined ? '':item.fyrq).substring(0,10) }}
                </div> -->
                <span class="item-major">
                  {{ (item.fyrq === undefined ? '':item.fyrq).substring(0,10) }}
                </span>
              </td>
              <td>
                <img src="@/assets/expense/point.png">
                费用金额:
                <!-- <div class="traffic-info" v-if="flag" style="width:85px">
                  {{ (item.je === undefined ? '0':item.je+'').replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}
                </div>
                <div class="traffic-info" v-else style="width:115px">
                  {{ (item.je === undefined ? '0':item.je+'').replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}
                </div> -->
                <span class="item-major">
                  {{ (item.je === undefined ? '0':item.je+'').replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}
                </span>
              </td>
            </tr>
          </table>
          <table style="width:100%; height:40px" v-if="expensetype === 'meal'">
            <tr>
              <td style="width:50%">
                <img src="@/assets/expense/point.png" />
                客户名称:
                <!-- <div class="item-info">{{ item.khmc }}</div> -->
                <span class="item-major">
                  {{ item.khmc.length <= 5 ? item.khmc : item.khmc.substring(0,5)+'...' }}
                </span>
              </td>
              <td>
                <img src="@/assets/expense/point.png" />
                招待地点:
                <!-- <div class="item-info">{{ item.zddd }}</div> -->
                <span class="item-major">
                  {{ item.zddd.length <= 5 ? item.zddd : item.zddd.substring(0,5)+'...' }}
                </span>
              </td>
            </tr>
          </table>
          <!-- <table style="width:100%; height:40px" v-if="expensetype === 'other'">
            <tr>
              <td style="width:50%">
                <img src="@/assets/expense/point.png" />
                备注:
                <span class="item-major">
                  {{ item.bz.length <= 5 ? item.sy : item.sy.substring(0,5)+'...' }}
                </span>
              </td>
            </tr>
          </table> -->
          <a-divider style="margin:0px 0px" />
          <div class="row-item-center">
            <a-col :span="20">
              <a-tag color="#4499fc" style="float:left;margin-top:7px">费用合计</a-tag>
              <div class="item-sum">{{ (item.fyhj === undefined ? '0':item.fyhj+'').replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</div>
            </a-col>
            <a-col
              :span="4"
              class="button"
              style="text-align: right;"
              @click.stop="deleteClick(item)"
              v-show="mode === 'edit'"
            >
              <img src="@/assets/expense/icon_delete.png" style="width:50px"/>            </a-col>
          </div>
        </div>
      </div>
    </a-checkbox-group>
  </div>
</template>
<script>
import { method } from '@/api/admin'
export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    expensetype: {
      type: String,
      required: false,
      default: ''
    }
  },
  data () {
    return {
      checked: [],
      mode: '',
      bxdh: '',
      color: 'pink',
      flag: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
    }
  },
  created () {
    this.mode = this.$route.query.mode
    this.bxdh = this.$route.query.bxdh
  },
  methods: {
    begin () {
      this.checked = []
    },
    /**
     * 删除
     */
    deleteClick (currentitem) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: `确认要删除报销单据${
          currentitem.bxdh === undefined ? '' : currentitem.bxdh
        }吗?`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          // 在这里调用删除接口
          _this.handleDelete(currentitem.id)
        },
        onCancel: () => {
          _this.$message.info('取消操作')
        }
      })
    },
    /**
     * 查看详情
     */
    cardClick (item) {
      this.$emit('cardClick', item, 'edit')
    },
    onChange (checkedValues) {
      this.checked = checkedValues
      this.$emit('mutiSelect', this.checked)
    },
    /**
     * 删除
     */
    handleDelete (id) {
      let url = ''
      if (this.expensetype === 'evection') {
        url = '/wb/ribs/delClf/'
      } else if (this.expensetype === 'traffic') {
        url = '/wb/ribs/delJtf/'
      } else if (this.expensetype === 'meal') {
        url = '/wb/ribs/delCyf/'
      } else {
        url = '/wb/ribs/delQt/'
      }
      const actionParam = {
        // 请求参数
        url: url + id,
        action: 'DELETE',
        message: '删除成功'
      }
      method(actionParam).then(res => {
        this.$emit('refresh', this.expensetype)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.detail-card {
  // min-height: 230px;
  border-radius: 5px;
  padding: 10px 0px 10px 0px;
  margin: 0px 10px 10px;
  background-color: #ffffff;
  color: #94999e;
  position: relative;
  .checkbox {
    position: absolute;
    padding: 20px 0 20px 10px;
    top: 30%;
    width: 70px;
    height: 70px;
  }
  .info {
    padding-left: 35px;
    .row-title {
      height: 40px;
      line-height: 40px;
      .bxdh {
        font-weight: bold;
        font-size: 15px;
      }
      .tjsj {
        margin-left: 15px;
        margin-top: 1px;
      }
      .button {
        img {
          width: 40px;
        }
      }
    }
    .bz {
      margin-bottom: 5px;
      // height: 40px;
    }
    .item-major {
      // font-size: 20px;
      margin-left: 5px;
    }
    .item-info {
      margin-left: 5px;
      white-space: nowrap;
      width: 210px;
      overflow: hidden;
      text-overflow: ellipsis;
      float: right;
    }
    .traffic-info {
      margin-left: 5px;
      white-space: nowrap;
      // width: 85px;
      overflow: hidden;
      text-overflow: ellipsis;
      float: right;
      text-align: left;
    }
    .row-item {
      height: 40px;
      line-height: 40px;
      .item-major {
        font-size: 20px;
        margin-right: 30px;
      }
    }
  }
  .row-item-center {
    height: 40px;
    display: flex;
    align-items: center;
    .item-sum {
      font-size: 22px;
      margin-left: 10px;
      font-weight: bold;
      color: #4499fc;
      float: left;
      width: 70px;
    }
  }
}
</style>
